<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form class="queryForm" :inline="true" label-width="0" :model="form">
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="用户名" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
    </vxeLable>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
export default {
  components: {
    vxeLable
  },
  mixins: [vxeLableJs],
  data() {
    return {
      form: {},
      tableConfig: {
        api: "",
        height: 700,
        tableData: [
          {
            id: 1,
            username: "admin",
            operation: "修改菜单",
            method: "com.yunzin.sys.controller.SysMenuController.update()",
            params:
              '[{"menuId":5,"parentId":1,"name":"SQL监控","url":"http://localhost:8080/yunzin-boot/druid/sql.html","type":1,"icon":"sql","orderNum":4}]',
            time: 76,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:41:11"
          },
          {
            id: 2,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":31,"parentId":1,"name":"部门管理","url":"sys/dept","perms":"","type":1,"icon":"shouye","orderNum":0}]',
            time: 113,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:52:00"
          },
          {
            id: 3,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":32,"parentId":31,"name":"查看","perms":"sys:dept:list,sys:dept:info","type":2,"orderNum":0}]',
            time: 117,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:53:28"
          },
          {
            id: 4,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":33,"parentId":31,"name":"新增","perms":"sys:user:save","type":2,"orderNum":0}]',
            time: 109,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:54:10"
          },
          {
            id: 5,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":34,"parentId":31,"name":"修改","perms":"sys:dept:update,sys:dept:list,sys:dept:select,sys:dept:info","type":2,"orderNum":0}]',
            time: 67,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:55:45"
          },
          {
            id: 6,
            username: "admin",
            operation: "修改菜单",
            method: "com.yunzin.sys.controller.SysMenuController.update()",
            params:
              '[{"menuId":33,"parentId":31,"name":"新增","perms":"sys:dept:save,sys:dept:list,sys:dept:select","type":2,"orderNum":0}]',
            time: 68,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:56:16"
          },
          {
            id: 7,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":35,"parentId":31,"name":"删除","perms":"sys:dept:delete","type":2,"orderNum":0}]',
            time: 70,
            ip: "127.0.0.1",
            createDate: "2020-05-07 21:56:53"
          },
          {
            id: 8,
            username: "admin",
            operation: "修改菜单",
            method: "com.yunzin.sys.controller.SysMenuController.update()",
            params:
              '[{"menuId":31,"parentId":1,"name":"部门管理","url":"sys/dept","perms":"","type":1,"icon":"zhedie","orderNum":6}]',
            time: 105,
            ip: "127.0.0.1",
            createDate: "2020-05-07 22:00:14"
          },
          {
            id: 9,
            username: "admin",
            operation: "保存菜单",
            method: "com.yunzin.sys.controller.SysMenuController.save()",
            params:
              '[{"menuId":36,"parentId":0,"name":"权限管理","url":"","perms":"","type":0,"icon":"role","orderNum":1}]',
            time: 75,
            ip: "127.0.0.1",
            createDate: "2020-05-07 22:01:00"
          },
          {
            id: 10,
            username: "admin",
            operation: "修改菜单",
            method: "com.yunzin.sys.controller.SysMenuController.update()",
            params:
              '[{"menuId":2,"parentId":36,"name":"管理员列表","url":"sys/user","type":1,"icon":"admin","orderNum":1}]',
            time: 106,
            ip: "127.0.0.1",
            createDate: "2020-05-07 22:01:15"
          }
        ],
        tablePage: true,
        tableToolbar: {
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons"
          }
        },
        tableColumn: [
          { type: "seq", width: 60, title: "序号" },
          { field: "username", title: "用户名" },
          { field: "operation", title: "用户操作" },
          { field: "method", title: "请求方法" },
          { field: "params", title: "请求参数" },
          { field: "time", title: "执行时长(毫秒)" },
          { field: "ip", title: "IP地址" },
          { field: "createDate", title: "创建时间" }
        ]
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() { },
  methods: {
    aaa(row) {
      console.log(row);
    },
    editData() {
      console.log("修改edit");
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addData() {
      console.log("新增add");
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent(files => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/menu/list"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: "post",
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    }
  }
};
</script>
<style scoped lang="scss">
.queryData {
  font-size: 0.14rem;
  color: #fff;
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
